<template>
	<div class="CategoryTab2_one">
		<div class="CategoryTab2_one_pic">
			<div class="CategoryTab2_one_pic_top">
				<div class="left">
					<img src="../../../../public/wlimg/1.png" />
					<span>发现城市的秘密<i class="iconfont">&#xec61;</i></span>
					<p>广州city walk</p>
				</div>
				<div class="right">
					<img src="../../../../public/wlimg/2.png" />
					<p>广州必打卡</p>
				</div>
			</div>
			<div class="CategoryTab2_one_pic_bottom">
				<ol>
					<li>
						<img src="../../../../public/wlimg/3.jpg" style="border-radius: 0 0 0 1rem;"/>
					</li>
					<li>
						<img src="../../../../public/wlimg/4.jpg"/>
					</li>
					<li>
						<img src="../../../../public/wlimg/5.jpg" style="border-radius: 0 0 1rem 0;" />
					</li>
				</ol>
				<aside>
					<span>从西关到东山</span>
					<p>City walk</p>
				</aside>
				<aside>
					<span>探索广州龙脉线</span>
					<p>古中轴</p>
				</aside>
				<aside>
					<span>热气球自由行</span>
					<p>民航资质</p>
				</aside>
			</div>
			<div class="bottom">
				
			</div>
		</div>
		<hr />
		<p>查看更多<i class="iconfont">&#xe62d;</i></p>
	</div>
</template>

<script>
	export default{
		name:'CategoryTab2_one'
	}
</script>

<style scoped>
	.CategoryTab2_one{
		margin: 0 auto;
		width: 98%;
		height: 16rem;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top{
		height: 7rem;
		width: 99.5%;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .left{
		width: 66.5%;
		float: left;
		position: relative;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .left span{
		color: white;
		position: absolute;
		display: block;
		top: 0;
		width: 7rem;
		line-height: 1.5rem;
		background-color: #5bd07e;
		font-size: 0.5rem;
		text-align: center;
		border-radius: 1rem 0 1rem 0;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .left i{
		font-size: 0.9rem;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .left p{
		position: absolute;
		top: 6.5rem;
		left: 1rem;
		font-weight: bolder;
		color: white;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .right{
		width: 33%;
		float: right;
		position: relative;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .right p{
		position: absolute;
		color: white;
		font-weight: bolder;
		top: 6.5rem;
		left: 0.5rem;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .left img{
		width: 100%;
		height: 8rem;
		border-radius: 1rem 0 0 0;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_top .right img{
		width: 100%;
		height: 8rem;
		border-radius: 0 1rem 0 0;
	}
	
	.CategoryTab2_one .CategoryTab2_one_pic_bottom{
		height: 9rem;
		
	}
	.CategoryTab2_one .CategoryTab2_one_pic_bottom li{
		display: flex;
		float: left;
		align-items: center;
		justify-content: center;
		width: 33.3%;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_bottom img{
		width: 99%;
		height: 8rem;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_bottom aside{
		margin-top: 0.5rem;
		float: left;
		
		text-align: center;
		width: 33%;
	}
	.CategoryTab2_one .CategoryTab2_one_pic_bottom aside span{
		font-weight: bolder;
		color: #3a3a3a;
		
	}
	.CategoryTab2_one .CategoryTab2_one_pic_bottom aside p{
		color: gray;
	}
	.CategoryTab2_one p{
		text-align: center;
	}
</style>
